<template>
  <div style="color:#6f7d96">
    对信息进行分组的选择器，能够直观呈现方便用户辨识。在有层级关系，但选项内容较复杂的场景下使用
    <div  class="tree-info-text" style="">
      <div>
        <span style="color:red">*</span>标题
        <e-treeSelect v-model="model1" :data="data1" v-width="300" />
      </div>
      <div style="margin-left: 50px">
        <span style="color:red">*</span>标题
        <e-treeSelect
          multiple
          show-checkbox
          v-model="model2"
          :data="data2"
          v-width="300"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data1: [
        {
          title: 'parent1',
          expand: true,
          value: 'parent1',
          selected: false,
          checked: false,
          children: [
            {
              title: 'parent 1-1',
              expand: true,
              value: 'parent1-1',
              selected: false,
              checked: false,
              children: [
                {
                  title: 'leaf 1-1-1',
                  value: 'leaf1',
                  selected: false,
                  checked: false,
                },
                {
                  title: 'leaf 1-1-2',
                  value: 'leaf2',
                  selected: false,
                  checked: false,
                },
              ],
            },
            {
              title: 'parent 1-2',
              expand: true,
              value: 'parent1-2',
              selected: false,
              checked: false,
              children: [
                {
                  title: 'leaf 1-2-1',
                  value: 'leaf3',
                  selected: false,
                  checked: false,
                },
                {
                  title: 'leaf 1-2-1',
                  value: 'leaf4',
                  selected: false,
                  checked: false,
                },
              ],
            },
          ],
        },
      ],
      data2: [
        {
          title: 'parent1',
          expand: true,
          value: 'parent1',
          selected: false,
          checked: false,
          children: [
            {
              title: 'parent 1-1',
              expand: true,
              value: 'parent1-1',
              selected: false,
              checked: false,
              children: [
                {
                  title: 'leaf 1-1-1',
                  value: 'leaf1',
                  selected: false,
                  checked: false,
                },
                {
                  title: 'leaf 1-1-2',
                  value: 'leaf2',
                  selected: false,
                  checked: false,
                },
              ],
            },
            {
              title: 'parent 1-2',
              expand: true,
              value: 'parent1-2',
              selected: false,
              checked: false,
              children: [
                {
                  title: 'leaf 1-2-1',
                  value: 'leaf3',
                  selected: false,
                  checked: false,
                },
                {
                  title: 'leaf 1-2-1',
                  value: 'leaf4',
                  selected: false,
                  checked: false,
                },
              ],
            },
          ],
        },
      ],
      model1: '',
      model2: [],
    }
  },
}
</script>
<style >
.tree-info-text {
  display: flex;
  margin-top: 20px
}
</style>
